<template>
    <el-dialog title="提示" :visible.sync="visible" @close='cancel'>
        <el-form ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="类型名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入类型名称" prefix-icon='el-icon-edit' show-word-limit clearable
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="类型图标">
                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                    <IconSelect ref="iconSelect" @selected="selected" />
                    <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                        <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
                            style="height: 32px;width: 16px;" />
                        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                    </el-input>
                </el-popover>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="commit">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import IconSelect from "@/components/IconSelect";
import { addType } from '@/api/hospital/physicalType'

export default {
    components: {
        IconSelect
    },
    data() {
        return {
            visible: true,
            form: {
                name: '',
                icon: ''
            },
            rules: {
                name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
                icon: [{ required: true, message: '请选择类型图标', trigger: 'blur' }]
            },
        };
    },
    mounted() {

    },
    methods: {
        commit() {
            this.$refs['elForm'].validate(valid => {
                if (valid) {
                    addType(this.form).then(res => {
                        if(res.code === 200) {
                            this.msgSuccess('您的操作已提交成功');
                            this.cancel(true);
                        }
                    });
                }
            })
        },
        cancel(flag) {
            this.$emit('close', flag);
        },
        selected(name) {
            this.form.icon = name;
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
